<template>
<div class="zdd">
  <my-header/>
    <!-- 轮播图 -->

  <div class="wc">
    <div class="wwe">

    <div class="ewc">
   <van-swipe class="mtswipe" 
    :autoplay="2000" 
    indicator-color="white"
    :style="{height:h}"
    > 
  <van-swipe-item  v-for="(item,i) of carousel" :key="i" >
      <img :src="item">
  </van-swipe-item>
  </van-swipe>  
  </div>

 <div class="roi">
<div class="ww">
   <h2 class="acc">热门电影</h2>
   <h3 class="cc">全部</h3>
   </div>
   
    <div class="ace">
      <div class="www">
        <router-link to="/filmdetails">
       <img src="/img/sy_1.jpg">
        <p>热门.电影</p>
        </router-link>
      </div>  

       <div>
        <img src="/img/sy_1.jpg">
        <p>热门1电影</p>
      </div>

      <div>
      <img src="/img/sy_1.jpg">
      <p>热门1电影</p>
      </div>

      <div>
       <img src="/img/sy_1.jpg">
       <p>热门1电影</p>
      </div>

      <div>
       <img src="/img/sy_1.jpg">
       <p>热门1电影</p>
      </div>

     <div>
       <img src="/img/sy_1.jpg">
       <p>热门1电影</p>
      </div>

     <div>
       <img src="/img/sy_1.jpg">
       <p>热门1电影</p>
      </div>
     
      
      
      </div>
</div>

  <div class="roi">
<div class="ww">
   <h2 class="acc">即将上映</h2>
   <h3 class="cc">全部</h3>
   </div>
   
    <div class="ace">
      <div>
       <img src="/img/sy_1.jpg">
        <p>热门.电影</p>
        <p>12ri12en</p>
      </div>  

       <div>
        <img src="/img/sy_1.jpg">
        <p>热门1电影</p>
        <p>12ri12en</p>
      </div>

      <div>
      <img src="/img/sy_1.jpg">
      <p>热门1电影</p>
      <p>12ri12en</p>
      </div>

      <div>
       <img src="/img/sy_1.jpg">
       <p>热门1电影</p>
       <p>12ri12en</p>
      </div>

      <div>
       <img src="/img/sy_1.jpg">
       <p>热门1电影</p>
       <p>12ri12en</p>
      </div>

     <div>
       <img src="/img/sy_1.jpg">
       <p>热门1电影</p>
       <p>12ri12en</p>
      </div>

     <div>
       <img src="/img/sy_1.jpg">
       <p>热门1电影</p>
       <p>12ri12en</p>
      </div>
     
      
      
      </div>
    </div>


<van-row>
  <van-col span="12">
      <div class="web">
        <img src="/img/sy_1.jpg">
        <p>《热门1电影》热门1电影热门1电影热门1电影热门1电影</p>
      </div>

      <div class="web">
        <img src="/img/sy_1.jpg">
        <p>《热门1电影》热门1电影热门1电影热门1电影热门1电影</p>
      </div>

      <div class="web">
        <img src="/img/sy_1.jpg">
        <p>《热门1电影》热门1电影热门1电影热门1电影热门1电影</p>
      </div>

      <div class="web">
        <img src="/img/sy_1.jpg">
        <p>《热门1电影》热门1电影热门1电影热门1电影热门1电影</p>
      </div>

      <div class="web">
        <img src="/img/sy_1.jpg">
        <p>《热门1电影》热门1电影热门1电影热门1电影热门1电影</p>
      </div>
    </van-col>
  <van-col span="12">
    <div class="wode">
        <img src="/img/sy_1.jpg">
        <p>《热门1电影》热门1电影热门1电影热门1电影热门1电影</p>
      </div>

      <div class="wode">
        <img src="/img/sy_1.jpg">
        <p>《热门1电影》热门1电影热门1电影热门1电影热门1电影</p>
      </div>

      <div class="wode">
        <img src="/img/sy_1.jpg">
        <p>《热门1电影》热门1电影热门1电影热门1电影热门1电影</p>
      </div>

      <div class="wode">
        <img src="/img/sy_1.jpg">
        <p>《热门1电影》热门1电影热门1电影热门1电影热门1电影</p>
      </div>

      <div class="wode">
        <img src="/img/sy_1.jpg">
        <p>《热门1电影》热门1电影热门1电影热门1电影热门1电影</p>
      </div>
  </van-col>

</van-row>  
  </div>
</div>
</div>
</template>


<script>
export default {
  data() {
    return{ 
    //轮播图图片
    carousel:[
    '/img/lun_4.jpg',
    '/img/lun_4.jpg',
    '/img/lun_4.jpg'
    ],
    
     //初始化轮播图高度
     h: '100%',
    }
  },
  methods:{
  /* 初始化轮播图高度*/
    initSwipeHeight(){
    let picw = 1242;
    let pich = 698;
    let screenw = window.screen.width; // 屏幕宽度的像素值
    let swipeh = Math.floor(pich*screenw / picw)+'px';
    this.h = swipeh;
  },
  mounted(){
  this.initSwipeHeight();
   }
  }
}
</script>
  
<style scoped>
.zdd{height: 100%;width: 100%;}

.rr{color: darkgray;height: 20px;}

.wc{width: 100%; background-color: aqua;}

.mtswipe{border-radius: 10px;}
 
 /*          上外边距溢出解决 */
.wc::before{content: '';display: table;}

.wwe{margin: 10px 10px 0 10px;}

.ewc img{ border-radius: 10px;width: 100%; margin-bottom:10px;}

.ewc{border-radius: 10px;}

.roi{ background-color: aliceblue; border-radius: 5px; margin: 0 0 10px 0 ;}
 
.ww{height: 20px; margin-bottom: 5px;}

.acc{float: left; margin:5px 0 0px 8px;}

.cc{float: right;margin: 5px 10px 0 0 ;color: darkgray;}



 /*                                       溢出   滚动 */
.ace{ display: flex; margin: 2px 0 0 0;overflow:scroll;}

.ace img{ border-radius: 5px; margin:0 5px 0 5px;width: 7rem;}

.ace p{ margin: 5px 0 0 2px;font-size: 12px;}

/* 滚动条不显示 */
.ace::-webkit-scrollbar{ width: 0;}

.web{ width: 95%; background-color: darkgreen; 
border-radius: 5px; text-align: center; 
font-size: 15px;margin-bottom: 5px;}

.web img{ border-top-left-radius: 5px;border-top-right-radius: 5px; width:100%;height: 11rem}

.wode{width:100%;background-color: darkgreen; border-radius:5px;
text-align: center;font-size: 15px;margin-bottom: 5px;}

.wode img{border-top-left-radius: 5px;border-top-right-radius: 5px; width:100%;height: 9.7rem}



/* 清除浮动 */
/* .clear{clear:both;} */

/* 特别 */
/* .fuc{width: 100%;height: 100%;}/* display: flex; justify-content: space-around;flex-wrap: wrap;*/
/* .abc{ background-color: rgb(231, 227, 231); 
margin: 10px 0 0 10px; width: 50%; 
border-radius: 5px;float: left;}
.abc img{ width: 100%;border-top-left-radius: 5px;border-top-right-radius: 5px;}
.abc p{font-size: 14px;text-align: center; }

.a{width:40%;background-color: rgb(231, 227, 231);
margin: 10px 5px 0 0px; border-radius: 5px; float: left;}
.a img{width: 100%;border-top-left-radius: 5px;border-top-right-radius: 5px;}
.a p{font-size: 14px;text-align: center;}
.ac{ width: 40%;float: left;} */ 


</style>
